<template>
	<view>
		<view class="header">
			<view class="header-o">
				<view class="">{{arry.length}}</view>
				<view class="">货品种类数</view>
			</view>
			<view class="header-o">
				<view class="">{{mad}}</view>
				<view class="">总欠货数</view>
			</view>
			<view class="header-o">
				<view class="">{{maf}}</view>
				<view class="">总库存数</view>
			</view>
			<view class="header-o" style="border: none;">
				<view class="">￥{{mae}}</view>
				<view class="">库存成本</view>
			</view>
		</view>

		<view class="coding" style="font-size: 30rpx; color: #333333;">
			<view class="coding-one">货品编码</view>
			<view class="coding-two">欠货数</view>
			<view class="coding-three">库存数</view>
			<view class="coding-four">库存成本</view>
		</view>
		<view class="coding" v-for="item in arry" :key="item.goods_id">
			<view class="coding-one">{{item.title}}(名称)</view>
			<view class="coding-two">{{qian(item)}}</view>
			<view class="coding-three">{{cun(item)}}</view>
			<view class="coding-four">¥{{add(item)}}</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			arry:[]
		};
	},
	onLoad() {
		this.showAll()
	},
	computed:{
		mad(){
			let c =0;
			this.arry.forEach(item=>{
				item.product_list.forEach(item=>{
					c=+item.owe_num+c
				})
			})
			return c
		},
		maf(){
			let c =0;
			this.arry.forEach(item=>{
				item.product_list.forEach(item=>{
					c=+item.store_num+c
				})
			})
			return c
		},
		mae(){
			let c =0;
			
			this.arry.forEach(item=>{
				item.product_list.forEach(item=>{
				c=(+item.store_num)*(+item.sell_price)+c
				})
			})
			
			return c
		}
	},
	methods: {
		showAll(){
			this.$ajax('api/v2.goods/index',{
			       }).then((res)=>{
			       this.arry=res.result
				   console.log(this.arry);
			       }).catch(res=>{
			        console.log(Error);
			       })
		},
		qian(item){
			let d =0
			item.product_list.forEach(item=>{
                   		d=+item.owe_num+d	
			})
			return d
		},
		cun(item){
			let d =0
			item.product_list.forEach(item=>{
		           		d=+item.store_num+d	
			})
			return d
		},
		add(item){
			let d =0
			item.product_list.forEach(item=>{
			       	d=(+item.store_num)*(+item.sell_price)+d
			})
			return d
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header {
	width: 100%;
	height: 162rpx;
	background-color: #ffffff;
	padding: 33rpx;
	box-sizing: border-box;
	display: flex;
		margin-bottom: 14rpx;
	.header-o {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 25%;
		text-align: center;
		line-height: 50rpx;
		border-right: 2rpx solid #dddddd;
	}
}

.coding {
	box-sizing: border-box;
	width: 100%;
	height: 113rpx;
	line-height: 113rpx;
	padding: 0 35rpx;
	background-color: #ffffff;
	font-size:28rpx;
	font-family:PingFang SC;
	font-weight:500;
    border-bottom: 2rpx solid #cccccc;
	display: flex;
	justify-content:space-around;
	color: #666666;
	.coding-one{
		width: 40%;
	}
}



</style>
